<template>
    <div class="container">
        <m-header :closeFn="onClose">班次</m-header>
        <div class="main">
            <div class="list-wrap">
                <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">
                    <div class="item-wrap" v-for="(item,index) in list" :key="index" @click="onSelect(item)">
                        <div class="item-box">
                            <div class="title bold">{{item.shuttle_name}}</div>
                            <div class="info">
                                <div class="h2" v-if="type !== 'tplx002'">去程：{{item.go_departure_time}}发车，{{item.go_arrive_time}}到校</div>
                                <div class="h2" v-if="type !== 'tplx001'">回程：{{item.leave_departure_time}}发车，{{item.leave_arrive_time}}到站</div>
                                <div class="h2 margin-bot10">时段：{{item.service_period}}</div>
                                <div class="h2 margin-bot10">说明：{{item.mark}}</div>
                                <div class="h2 margin-bot10 bold">{{item.sell_dateime_start}}开售</div>
                            </div>
                            <div class="qr">
                                <van-icon name="qr" size="24" @click.stop="previewQr(item.group_qrcode)" />
                                <div>咨询</div>
                            </div>
                        </div>

                    </div>
                </m-list>
            </div>
        </div>
    </div>
</template>

<script>
  import list from '@/components/list/list';
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
  import {getShuttle} from "../../../request/api";
  import {crtTimeFtt} from "../../../utils/utils";
  import {ImagePreview} from 'vant'

  const http = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_PATH : window.webConfig.webApiBasePath;

  export default {
    name: "chooseSchedule",
    components: {
      "m-list": list,
      [ImagePreview.Component.name]: ImagePreview.Component
    },
    /**
     * type: 套票类型
     * goId: 上车上车站点id
     * leaveId: 回程上车站点id
     */
    props: ['type','goId','leaveId'],
    computed: {
      ...mapState({
        schoolId: state => state.school.schoolId
      })
    },
    data() {
      return {
        list: [],
        total: 0,
        limit: 10,
        page:1,
        loading: false,
        loadEnd: true
      }
    },
    methods: {
      getDataList(first){
        let {loadEnd,type} = this,  //当前请求页数
          list = [];
        let obj = {
          school_id: this.schoolId || '',
          stop_id_go: '',
          stop_id_leave: '',
          shuttle_id: ''
        };
        type !== 'tplx002' && (obj.stop_id_go = this.goId || '')
        type !== 'tplx001' && (obj.stop_id_leave = this.leaveId || '')
        getShuttle(obj).then(res => {
          if (res.errcode !== 0)return;
          let data = res.row;

          this.list = data;
          this.loadEnd = !loadEnd;
          this.total = data.length;
          this.limit = data.length;
        })
      },
      onClose(){
        this.$emit('close');
      },
      onSelect(data){
        let {sell_dateime_end,sell_dateime_start} = data,
          nowTime = new Date().getTime(),
          startTime = sell_dateime_start && new Date(crtTimeFtt(sell_dateime_start,'YYYY/MM/DD HH:mm:ss')).getTime(),
          endTime = sell_dateime_end && new Date(crtTimeFtt(sell_dateime_end,'YYYY/MM/DD HH:mm:ss')).getTime()

        if (startTime <= nowTime && nowTime <= endTime){
          this.$emit('select',data);
        } else {
          this.$Toast('当前时间班车不可售');
        }

      },

    //  预览图片
      previewQr(url){
        if (!url){
          this.$Toast('当前班车未有群二维码');
          return
        }
        console.log(http + url);
        ImagePreview({
          images: [http + url],
          showIndex: false,
          overlayStyle: {
            "background": "rgba(0,0,0,0.5)"
          }
        });
      }
    }
  }
</script>

<style scoped lang="less">
.list-wrap{
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    .item-wrap{
        padding: 0 10px;
        .item-box{
            border-bottom: 1px solid #dedede;
            padding: 0 15px;
            background: #fff;
            border-radius: 2px;
            position: relative;
            .qr{
                padding: 10px;
                position: absolute;
                top: 0;
                right: 0;
                text-align: right;
            }

        }
        .title{
            font-size: 17px;
            color: #333;
            padding: 10px 0;
        }
        .h2{
            color: #333;
            font-size: 14px;
            line-height: 21px;
        }
        .bold{
            font-weight: bold;
        }
        .margin-bot10{
            margin-bottom: 10px;
        }
    }
}
</style>
